<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="title">我的订单</text>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <!-- 待拍摄订单 -->
      <view class="order-card" @tap="goToOrderDetail('20231125001')">
        <view class="order-header">
          <text class="photographer-name">小明摄影</text>
          <text class="order-status status-pending">待拍摄</text>
        </view>
        <view class="order-number">订单号：20231125001</view>
        <view class="order-content">
          <image src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" class="photographer-avatar"></image>
          <view class="order-info">
            <text class="package-name">基础套餐</text>
            <text class="package-desc">30张精修照片，拍摄时间1小时</text>
            <text class="booking-time">预约时间：2023-11-25 上午</text>
          </view>
        </view>
        <view class="order-footer">
          <view class="price-info">实付款：<text class="price">¥199</text></view>
          <view class="action-buttons">
            <button class="btn-secondary" @tap.stop="cancelBooking('20231125001')">取消预约</button>
            <button class="btn-primary" @tap.stop="contactPhotographer('小明摄影', '13812345678')">联系摄影师</button>
          </view>
        </view>
      </view>

      <!-- 进行中订单 -->
      <view class="order-card" @tap="goToOrderDetail('20231124002')">
        <view class="order-header">
          <text class="photographer-name">小蓝摄影</text>
          <text class="order-status status-processing">进行中</text>
        </view>
        <view class="order-number">订单号：20231124002</view>
        <view class="order-content">
          <image src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61" class="photographer-avatar"></image>
          <view class="order-info">
            <text class="package-name">高级套餐</text>
            <text class="package-desc">50张精修照片，拍摄时间2小时</text>
            <text class="booking-time">预约时间：2023-11-24 下午</text>
          </view>
        </view>
        <view class="order-footer">
          <view class="price-info">实付款：<text class="price">¥299</text></view>
          <view class="action-buttons">
            <button class="btn-secondary" @tap.stop="viewProgress('20231124002')">查看进度</button>
            <button class="btn-primary" @tap.stop="contactPhotographer('小蓝摄影', '13987654321')">联系摄影师</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          id: '20231125001',
          photographerName: '小明摄影',
          photographerPhone: '13812345678',
          status: '待拍摄',
          packageName: '基础套餐',
          packageDesc: '30张精修照片，拍摄时间1小时',
          bookingTime: '2023-11-25 上午',
          price: 199,
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde'
        },
        {
          id: '20231124002',
          photographerName: '小蓝摄影',
          photographerPhone: '13987654321',
          status: '进行中',
          packageName: '高级套餐',
          packageDesc: '50张精修照片，拍摄时间2小时',
          bookingTime: '2023-11-24 下午',
          price: 299,
          avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61'
        }
      ]
    }
  },
  onLoad() {
    // 这里应该从服务器获取订单数据
    // this.getOrders();
  },
  methods: {
    // 获取订单列表
    getOrders() {
      // API调用获取订单数据
    },
    
    // 取消预约
    cancelBooking(orderId) {
      uni.showModal({
        title: '取消预约',
        content: '确定要取消此次预约吗？取消可能会产生违约金。',
        confirmColor: '#FF4D4F',
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用取消预约的API
            uni.showLoading({
              title: '取消中...'
            });
            
            // 模拟API调用
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '预约已取消',
                icon: 'success'
              });
              
              // 更新订单状态
              this.orders.forEach(order => {
                if (order.id === orderId) {
                  order.status = '已取消';
                }
              });
            }, 1500);
          }
        }
      });
    },
    
    // 联系摄影师
    contactPhotographer(name, phone) {
      uni.showActionSheet({
        itemList: ['拨打电话', '发送短信'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 拨打电话
            uni.makePhoneCall({
              phoneNumber: phone,
              fail: () => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          } else if (res.tapIndex === 1) {
            // 发送短信
            uni.showToast({
              title: '短信功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 查看进度
    viewProgress(orderId) {
      uni.navigateTo({
        url: `/pages/order-progress/order-progress?id=${orderId}`
      });
    },
    
    // 进入订单详情
    goToOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order-detail/order-detail?id=${orderId}`
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F3F4F6;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-card {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.order-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #E5E7EB;
}

.photographer-name {
  font-size: 28rpx;
  font-weight: 500;
}

.order-status {
  font-size: 24rpx;
}

.status-pending {
  color: #F59E0B;
}

.status-processing {
  color: #3B82F6;
}

.status-completed {
  color: #10B981;
}

.order-number {
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #6B7280;
  margin-top: 10rpx;
}

.order-content {
  display: flex;
  padding: 20rpx;
}

.photographer-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.order-info {
  flex: 1;
}

.package-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
}

.package-desc, .booking-time {
  font-size: 24rpx;
  color: #6B7280;
  margin-top: 8rpx;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #F9FAFB;
}

.price-info {
  font-size: 24rpx;
  color: #6B7280;
}

.price {
  color: #8B5CF6;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.btn-primary, .btn-secondary {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
}

.btn-primary {
  background-color: #8B5CF6;
  color: #fff;
}

.btn-secondary {
  border: 1rpx solid #D1D5DB;
  color: #6B7280;
}
</style>